<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-11-13 15:24:56
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-11-15 17:57:08
 * @Description: 
 * @FilePath: \charging-admin\src\views\charge\map\index.vue
-->
<template>
  <div class="app-container map-container">
    <div id="map" style="width: 100%; height: 100%"></div>

    <!-- 站点详情抽屉卡片 -->
    <div class="map-drawer" :class="{ show: detailVisible }">
      <!-- 基本信息 -->
      <el-card class="base-info-card">
        <div class="base-title">基本信息</div>
        <div class="site-name">{{ selectedData.siteName }}</div>
        <div class="site-addr ellipsis">{{ selectedData.detailAddress }}</div>
        <div class="site-station">
          <div class="station-num color-primary">总数 -</div>
          <div class="station-num color-sccess">空闲 -</div>
          <div class="station-num color-warning">忙碌 -</div>
          <div class="station-num color-info">故障 -</div>
        </div>
        <!-- 充电桩数 -->
        <div class="small-card">
          <div class="small-card__left">
            <div class="small-card__title">充电桩总数(台)</div>
            <div class="small-card__num">{{ selectedData.siteNumber }}</div>
          </div>
          <div class="small-card__right">
            <div class="small-card__normal color-sccess">正常桩数 {{ selectedData.normalSiteNumber }}</div>
            <div class="small-card__error color-danger">故障桩数 {{ selectedData.breakDownSiteNumber }}</div>
          </div>
        </div>
        <!-- 充电口数 -->
        <div class="small-card">
          <div class="small-card__left">
            <div class="small-card__title">充电口总数(台)</div>
            <div class="small-card__num">-</div>
          </div>
          <div class="small-card__right">
            <div class="small-card__normal color-sccess">正常充电口 -</div>
            <div class="small-card__error color-danger">故障充电口 -</div>
          </div>
        </div>
      </el-card>
      <!-- 充电桩信息 -->
      <el-card class="station-card">
        <div class="station-title">充电桩信息</div>
        <div class="station-list">
          <div class="station-item" v-for="(item, index) in stationList">
            <div class="station-item__header">
              <div class="station-item__name ellipsis">
                {{ item.stationName }}
              </div>
              <div class="station-item__no">{{ item.deviceSerialNum }}</div>
            </div>
            <div class="station-item__content">
              <div class="station-item__info">
                <div class="station-item__online">
                  在线状态: <span class="color-sccess">{{ onlineStatusMap[item.onlineStatus] }}</span>
                </div>
                <div class="station-item__status">
                  充电桩状态: <span class="color-sccess">{{ deviceStatusMap[item.deviceStatus] }}</span>
                </div>
              </div>
              <div class="station-item__nums">
                <div class="station-item__num color-primary">总数 -</div>
                <div class="station-item__num color-sccess">空闲 -</div>
                <div class="station-item__num color-warning">忙碌 -</div>
                <div class="station-item__num color-info">故障 -</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getMapListAPI } from "@/api/charge/map";
import { getListAPI as getStationListAPI } from "@/api/charge/station";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "Index",
  data() {
    return {
      deviceStatusMap: {
        NORMAL: "正常",
        BREAK: "故障",
      },
      onlineStatusMap: {
        ONLINE: "在线",
        OFFLINE: "离线",
        UNREGISTER: "未注册",
      },
      visible: true,
      detailVisible: false,
      icons: {
        normal:
          "https://charging-mini.oss-cn-hangzhou.aliyuncs.com/charging-mini/test/user/1852264564548263937/1731581064963-awpsbiF4Ud5Nf090f4bce487db9893e2d5f5e3f97e9f.png",
        selected:
          "https://charging-mini.oss-cn-hangzhou.aliyuncs.com/charging-mini/test/user/1852264564548263937/1731656568429-nGDU4DDtF6Kl008ca122a9ac084ec802a913e1156591.png",
      },
      selectedMarker: null,
      siteList: [],
      stationList: []
    };
  },
  computed: {
    selectedData() {
      let data = this.selectedMarker ? this.selectedMarker.getExtData() : {};
      console.log(data);
      return data;
    }
  },
  watch: {
    selectedData(newVal) {
      if (newVal.id) {
        this.getStationList(newVal.id);
      }
    }
  },
  created() {
  },
  mounted() {
    getMapListAPI().then(res => {
      console.log(res);
      if (res.code === 200) {
        this.siteList = res.data || [];
        this.initAMap();
      }
    })
  },
  methods: {
    // 地图初始化
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "c860797e18c8a6d07dbf9b7d802ef3d4",
      };
      AMapLoader.load({
        key: "013dc7ef41f35fe78a6562c0e73b08d9", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.createMap();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 绘制地图
    createMap() {
      let that = this;
      this.map = new AMap.Map("map", {
        mapStyle: "amap://styles/blue",
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [118.266453, 33.950905], // 初始化地图中心点位置
        features: ["bg", "road", "building", "point"],
      });

      // 普通icon
      const normalIcon = new AMap.Icon({
        size: new AMap.Size(42, 42), //图标尺寸
        image: this.icons.normal,
        imageOffset: new AMap.Pixel(0, 0), //图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(42, 42), //根据所设置的大小拉伸或压缩图片
      });
      // 选中的icon
      const selectedIcon = new AMap.Icon({
        size: new AMap.Size(42, 42), //图标尺寸
        image: this.icons.selected,
        imageOffset: new AMap.Pixel(0, 0), //图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(42, 42), //根据所设置的大小拉伸或压缩图片
      });

      // 批量创建站点marker
      const markers = this.siteList.map(site => {
        return new AMap.Marker({
          position: new AMap.LngLat(site.longitude, site.latitude),
          icon: normalIcon,
          title: site.name,
          extData: site // 存储站点数据用于点击时展示详情
        });
      });

      // 点击地图
      this.map.on("click", () => {
        this.selectedMarker.setIcon(normalIcon);
        this.detailVisible = false;
      });

      markers.forEach(element => {
        // 点击marker
        element.on("click", function (e) {
          console.log(e);
          if (that.selectedMarker) {
            that.selectedMarker.setIcon(normalIcon);
            that.detailVisible = false;
          }

          that.selectedMarker = this;
          if (this.getIcon() === normalIcon) {
            this.setIcon(selectedIcon);
          }
          that.detailVisible = true;
        });

        this.map.add(element);
      });
    },
    // 根据站点id获取站点充电桩列表
    getStationList(siteId) {
      getStationListAPI({
        pageNum: 1,
        pageSize: 100,
        siteId
      }).then(res => {
        console.log('getStationList', res);
        if (res.code === 200) {
          this.stationList = res.rows || [];
          console.log(this.stationList);
        }
      })
    }
  },
};
</script>
<style>
.amap-info-window {
  width: 150px;
  background: #fff;
  border-radius: 3px;
  padding: 3px 7px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
  font-size: 12px;
}
</style>
<style scoped lang="scss">
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-primary {
  color: #409eff;
}

.color-sccess {
  color: #67c23a;
}

.color-warning {
  color: #e6a23c;
}

.color-danger {
  color: #f56c6c;
}

.color-info {
  color: #909399;
}

.map-container {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.demo-title {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

h1 {
  margin: 0;
  color: #acb3bb;
}

h3 {
  font-weight: normal;
  margin-top: 5px;
  color: #8e939d;
}

.map-drawer {
  position: absolute;
  width: 360px;
  top: 20px;
  right: -400px;
  transition-duration: 0.4s;

  &.show {
    right: 20px;
  }
}

.base-info-card {
  color: #333;
  margin-bottom: 20px;

  .base-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 15px;
  }

  .site-name {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 15px;
  }

  .site-addr {
    font-size: 13px;
    line-height: 1;
    margin-bottom: 15px;
    color: #999;
  }

  .site-station {
    display: flex;
    margin-bottom: 15px;

    .station-num {
      width: 25%;
      font-size: 13px;
      line-height: 1;
      text-align: center;
    }
  }

  .small-card {
    background-color: #fafdff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }

    .small-card__left {
      width: 50%;

      .small-card__title {
        font-size: 16px;
        margin-bottom: 5px;
      }

      .small-card__num {
        font-size: 34px;
        line-height: 1;
        font-weight: bold;
      }
    }

    .small-card__right {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      font-size: 14px;
      line-height: 20px;
    }
  }
}

.station-card {
  .station-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 15px;
  }

  .station-list {
    height: 200px;
    overflow-y: auto;

    .station-item {
      background-color: #fafdff;
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;

      .station-item__header {
        display: flex;
        font-size: 13px;
        line-height: 20px;
        padding-bottom: 5px;
        border-bottom: 1px solid #efefef;

        .station-item__name {
          font-weight: bold;
          width: 50%;
        }

        .station-item__no {
          width: 50%;
          text-align: right;
        }
      }

      .station-item__content {
        .station-item__info {
          display: flex;
          justify-content: center;
          font-size: 13px;
          line-height: 1;
          margin: 10px 0 15px;

          .station-item__online {
            width: 50%;
            text-align: center;
          }

          .station-item__status {
            width: 50%;
            text-align: center;
          }
        }

        .station-item__nums {
          width: 100%;
          display: flex;

          .station-item__num {
            width: 25%;
            font-size: 13px;
            line-height: 1;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
